<extend name="./Application/Common/View/block/base.php" />
<block name="header">
    <include file="./Application/Admin/View/block/easyui_header.php" />
    <include file="./Application/Admin/View/block/amap_header.php" />
    <link rel="stylesheet" href="__PUBLIC__/module/manage/css/visualization.css" />
    <style>
        body{
            background: #f0f0f0;
        }
        .botton-tip{
            position: absolute;
            right: 12px;
            bottom: 30px;
            background: rgb(255, 255, 255);
        }
        #rain_dist{
            position: absolute;
            right: 12px;
            bottom: 200px;
            width: 54px;
            height: 96px;
        }
        #show_pump,#show_csdt,#show_gate,#show_rain{
            display: none;
        }
        #error{
            margin-top: 10px;;
            height: 30px;
            line-height: 30px;
        }
        #container{
            bottom: 0px;
        }
        .infor_table{
            margin: 0px auto;
        }
        .infor_table td{
            text-align: left;
            padding:0px 10px;
            line-height: 50px;
        }
        #map_sample{
            z-index: 9999;
            position: absolute;
            left: 10px;
            bottom: 20px;
            width: 80px;
        }
    </style>
</block>
<block name="bdoy">
    <body>
    <div id="gtx" class="easyui-window" closed="true" title="概览查看" style="width: 600px;height: 400px;"></div>
    <div id="container" style="bottom: 0px;"></div>
    <div id="text_container" style="position: absolute;left: 0px;top: 0px;padding-left: 20px;font-weight: bold;text-align: center;">
        <table class="infor_table" >
            <tr>
                <td>泵站：{$stations_count}座</td>
                <td>调蓄池：{$csdts_count}座</td>
                <td>河闸：{$gates_count}座</td>
                <td>
                    故障数：
                    <select class=""  id="error" style="width:150px;" data-options="prompt:'故障设施'">
                    </select>
                </td>
                <td>
                    泵站泵机数：{$pumps_count}台
                </td>
                <td>
                    泵站总抽排能力：{$flow_count}(立方米/时)
                </td>
            </tr>
        </table>
    </div>
    <img id="rain_dist" src="__PUBLIC__/img/rain_dist.jpg">
    <img id="map_sample" src="__PUBLIC__/module/manage/image/map_sample.jpg">
    <div class="botton-tip">
        <table>
            <tr>
                <td align="right">
                    泵站
                </td>
                <td>
                    <input id="pump_st" class="easyui-switchbutton" data-options="onText:'显示',offText:'隐藏'">
                </td>
            </tr>
            <tr>
                <td align="right">
                    调蓄池
                </td>
                <td>
                    <input id="csdt_st" class="easyui-switchbutton" data-options="onText:'显示',offText:'隐藏'">
                </td>
            </tr>
            <tr>
                <td align="right">
                    河闸
                </td>
                <td>
                    <input id="gate_st" class="easyui-switchbutton" data-options="onText:'显示',offText:'隐藏'">
                </td>
            </tr>
            <tr>
                <td align="right">
                    雨情
                </td>
                <td>
                    <input id="rain_st" class="easyui-switchbutton" data-options="onText:'显示',offText:'隐藏'">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <a href="#" onclick="$('#rain_list_window').window('open')" class="easyui-linkbutton">查看雨情</a>
                </td>
            </tr>
        </table>
<!--        <a href="#" onclick="show_pump()" id="show_pump" class="easyui-linkbutton" data-options="iconCls:'icon-add'">显示泵站</a>-->
<!--        <a href="#" onclick="hide_pump()" id="hide_pump" class="easyui-linkbutton" data-options="iconCls:'icon-add'">隐藏泵站</a>-->
<!--        <a href="#" onclick="show_csdt()" id="show_csdt" class="easyui-linkbutton" data-options="iconCls:'icon-add'">显示调蓄池</a>-->
<!--        <a href="#" onclick="hide_csdt()" id="hide_csdt" class="easyui-linkbutton" data-options="iconCls:'icon-add'">隐藏调蓄池</a>-->
<!--        <a href="#" onclick="show_gate()" id="show_gate" class="easyui-linkbutton" data-options="iconCls:'icon-add'">显示河闸</a>-->
<!--        <a href="#" onclick="hide_gate()" id="hide_gate" class="easyui-linkbutton" data-options="iconCls:'icon-add'">隐藏河闸</a>-->
<!--        <a href="#" onclick="show_circles()" id="show_rain" class="easyui-linkbutton" data-options="iconCls:'icon-add'">显示雨情</a>-->
<!--        <a href="#" onclick="hide_circles()" id="hide_rain" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">隐藏雨情</a>-->

    </div>
    <div id="rain_list_window" class="easyui-window" title="实时雨情" data-options="closed:true" style="width:1090px;height:530px;">
        <iframe src="__URL__/live_rain_report" style="width:1070px;height:486px;"></iframe>
    </div>
<!--    <div id="dlg" closed="false" class="easyui-dialog" title="故障" top="300px" left="12px" style="width: 80px;height: 200px;">-->
<!--        <ul id="nowork_ul">-->
<!---->
<!--        </ul>-->
<!--    </div>-->
    </body>
</block>
<block name="footExtendJs">
    <script type="text/javascript">
        var map;
        var need_clear_cluster = false;
        var pump_cluster;
        var csdt_cluster;
        var gate_cluster;
        var error_fixs = 0, error_fixs_text = '';
        $(function(){
            $('#container').height(window.innerHeight-60);
            $('#container').css({'top':'50px','text-align':'center'});
            $('#text_container').height(50);
            $('#text_container').css({'margin-left':(window.innerWidth-$('#text_container').width())/2+'px'});

            map = new AMap.Map('container', {
                resizeEnable: true,
                zoom:13,
                center: [102.70281,25.033455],

            });
            map.plugin(["AMap.MapType"],function(){
                var mapType= new AMap.MapType({showRoad:true});
                map.addControl(mapType);
            });
            //获取所有泵站
            get_all_pump();
            $('#pump_st').switchbutton({
                onChange: function(checked){
                    if(!checked){
                        show_pump();
                    }else{
                        hide_pump();
                    }
                }
            });
            $('#csdt_st').switchbutton({
                onChange: function(checked){
                    if(!checked){
                        show_csdt();
                    }else{
                        hide_csdt();
                    }
                }
            });
            $('#gate_st').switchbutton({
                onChange: function(checked){
                    if(!checked){
                        show_gate();
                    }else{
                        hide_gate();
                    }
                }
            });
            $('#rain_st').switchbutton({
                onChange: function(checked){
                    if(!checked){
                        show_circles();
                    }else{
                        hide_circles();
                    }
                }
            });
            $('#error').change(function(){
                var x = $(this).val();
                if(x == ''){
                    return;
                }
                var arr = x.split("|");
                open_map_dialog(arr[0], eval(arr[1]), arr[2])
            });
        });




        //获取所有泵站
        var pumps = {};
        function get_all_pump(){
            var url = '/Manage/AdminPumpStation/get_all_facilities';
            $.getJSON(url, function(data){
                pumps = data;
                map.remove(pump_markers);
                add_pump_point();
                map.plugin(["AMap.MarkerClusterer"], function() {
                    pump_cluster = new AMap.MarkerClusterer(map, pump_markers, {maxZoom:15});
                });
                get_all_csdt();
            })
        }

        //获取所有调蓄池
        var csdts = {};
        function get_all_csdt(){
            var url = '/Manage/AdminCsdt/get_all_facilities';
            $.getJSON(url, function(data){
                csdts = data;
                map.remove(csdt_markers);
                add_csdt_point();
                map.plugin(["AMap.MarkerClusterer"], function() {
                    csdt_cluster = new AMap.MarkerClusterer(map, csdt_markers, {maxZoom:15});
                });
                get_all_gate();
            })
        }

        //获取所有河道闸门
        var gates = {};
        function get_all_gate(){
            var url = '/Manage/AdminGate/get_all_facilities';
            $.getJSON(url, function(data){
                gates = data;
                map.remove(gate_markers);
                add_gate_point();
                map.plugin(["AMap.MarkerClusterer"], function() {
                    gate_cluster = new AMap.MarkerClusterer(map, gate_markers, {maxZoom:15});
                });
                set_error_fixs();
            })
        }

        //标注上点
        var pump_markers = [];
        var csdt_markers = [];
        var gate_markers = [];
        var marker;
        var circles = [];
        var colors = {:get_kv_val('eain_colors')};
        var fillOpacity = {:get_kv_val('rain_fillOpacity')};
        function add_pump_point(){
            for(var i=0;i<pumps.length;i++){
                var obj = pumps[i];
                if(obj.gps == '' || obj.gps == null){
                    continue;
                }
                var gps = obj.gps.split(",");
                gps = [gps[0],gps[1]];
                var icon = '';
                switch (obj.status){
                    case -1:
                        icon = 'http://www.dabaoku.com/gif/biaoshi/032/011k.gif';
                        $('#nowork_ul').append('<li><a onclick="open_map_dialog('+obj.id+', ['+gps+'], "/Manage/AdminPumpStation/overview?id=")">' +
                        '<img src="http://www.dabaoku.com/gif/biaoshi/032/011k.gif"/>'+
                        '<div>'+ obj.name + '</div>'+
                        '</a></li>');
                        error_fixs_text += '<option value="'+obj.id+'|['+gps+']|/Manage/AdminPumpStation/overview?id=">'+obj.name+'</option>';
                        $('#error').css({'background':'rgb(255, 133, 133)','color':'#ffffff'});
                        error_fixs++;
                        break;
                    case 1:
                        icon = '__PUBLIC__/module/manage/image/pumpstation/run.png';
                        break;
                    default  :
                        icon = '__PUBLIC__/module/manage/image/pumpstation/nor.png';
                        break;
                }
                marker = new AMap.Marker({
                    position: gps,
                    icon: new AMap.Icon({
                        size: new AMap.Size(40, 50),
                        image: icon,
                        imageOffset: new AMap.Pixel(0, 0)
                    })
                });
                marker.setMap(map);
                //添加点击打开窗口事件
                marker.gps = gps;
                marker.openurl = '/Manage/AdminPumpStation/overview?id=';
                marker.panelid = obj.id;
                marker.content = '<div id="'+obj.id+'" >'+obj.id+'</div>';
                marker.on('click', markerClick);
//                marker.emit('click', {target: marker});

                // 设置label标签
                marker.setLabel({
                    offset: new AMap.Pixel(10, 33),
                    content: obj.name
                });
                pump_markers.push(marker);
                //开始标注天气
                var circle = new AMap.Circle({
                    center: gps,
                    radius: 1000,
                    strokeColor: "",
                    strokeOpacity: 0,
                    strokeWeight: 0,
                    fillColor: colors[obj.weather],
                    fillOpacity: fillOpacity[obj.weather]
                });
                circle.setMap(map);
                circles.push(circle);
            }
            var left= window.innerWidth-80-13;
//            $('#dlg').window('open').window('resize',{width:'80px',height:'200px',top: '150px',left:left+'px'});
        }

        function add_csdt_point(){
            for(var i=0;i<csdts.length;i++){
                var obj = csdts[i];
                if(obj.gps == '' || obj.gps == null){
                    continue;
                }
                var gps = obj.gps.split(",");
                gps = [gps[0],gps[1]];
                var icon = '';
                switch (obj.status){
                    case -1:
                        icon = 'http://www.dabaoku.com/gif/biaoshi/032/011k.gif';
                        $('#nowork_ul').append('<li><a onclick="open_map_dialog('+obj.id+', ['+gps+'], "/Manage/AdminCsdt/overview?id=")">' +
                        '<img src="http://www.dabaoku.com/gif/biaoshi/032/011k.gif"/>'+
                        '<div>'+ obj.name + '</div>'+
                        '</a></li>');
                        error_fixs_text += '<option value="'+obj.id+'|['+gps+']|/Manage/AdminCsdt/overview?id=">'+obj.name+'</option>';
                        $('#error').css({'background':'rgb(255, 133, 133)','color':'#ffffff'});
                        error_fixs++;
                        break;
                    case 1:
                        icon = '__PUBLIC__/module/manage/image/csdt/run.png';
                        break;
                    default  :
                        icon = '__PUBLIC__/module/manage/image/csdt/nor.png';
                        break;
                }
                marker = new AMap.Marker({
                    position: gps,
                    icon: new AMap.Icon({
                        size: new AMap.Size(40, 50),
                        image: icon,
                        imageOffset: new AMap.Pixel(0, 0)
                    })
                });
                marker.setMap(map);
                //添加点击打开窗口事件
                marker.gps = gps;
                marker.openurl = '/Manage/AdminCsdt/overview?id=';
                marker.panelid = obj.id;
                marker.content = '<div id="'+obj.id+'" >'+obj.id+'</div>';
                marker.on('click', markerClick);
//                marker.emit('click', {target: marker});

                // 设置label标签
                marker.setLabel({
                    offset: new AMap.Pixel(10, 33),
                    content: obj.name
                });
                csdt_markers.push(marker);
                //开始标注天气
                var circle = new AMap.Circle({
                    center: gps,
                    radius: 1000,
                    strokeColor: "",
                    strokeOpacity: 0,
                    strokeWeight: 0,
                    fillColor: colors[obj.weather],
                    fillOpacity: fillOpacity[obj.weather]
                });
                circle.setMap(map);
                circles.push(circle);
            }
            var left= window.innerWidth-80-13;
//            $('#dlg').window('open').window('resize',{width:'80px',height:'200px',top: '150px',left:left+'px'});
        }

        function add_gate_point(){
            for(var i=0;i<gates.length;i++){
                var obj = gates[i];
                if(obj.gps == '' || obj.gps == null){
                    continue;
                }
                var gps = obj.gps.split(",");
                gps = [gps[0],gps[1]];
                var icon = '';
                switch (obj.status){
                    case -1:
                        icon = 'http://www.dabaoku.com/gif/biaoshi/032/011k.gif';
                        $('#nowork_ul').append('<li><a onclick="">' +
                        '<img src="http://www.dabaoku.com/gif/biaoshi/032/011k.gif"/>'+
                        '<div>'+ obj.name + '</div>'+
                        '</a></li>');
                        error_fixs_text += '<option value="-999|['+gps+']|/Manage/AdminPumpStation/overview?id=">'+obj.name+'</option>';
                        $('#error').css({'background':'rgb(255, 133, 133)','color':'#ffffff'});
                        error_fixs++;
                        break;
                    case 1:
                        icon = '__PUBLIC__/module/manage/image/rivergate/run.png';
                        break;
                    default  :
                        icon = '__PUBLIC__/module/manage/image/rivergate/nor.png';
                        break;
                }
                marker = new AMap.Marker({
                    position: gps,
                    icon: new AMap.Icon({
                        size: new AMap.Size(40, 50),
                        image: icon,
                        imageOffset: new AMap.Pixel(0, 0)
                    })
                });
                marker.setMap(map);
                //添加点击打开窗口事件
                marker.gps = gps;
                marker.openurl = '/Manage/AdminGate/overview?id=';
                marker.panelid = obj.id;
                marker.content = '<div id="'+obj.id+'" >'+obj.id+'</div>';
                marker.on('click', markerClick);
//                marker.emit('click', {target: marker});

                // 设置label标签
                marker.setLabel({
                    offset: new AMap.Pixel(10, 33),
                    content: obj.name
                });
                gate_markers.push(marker);
                //开始标注天气
                var circle = new AMap.Circle({
                    center: gps,
                    radius: 1000,
                    strokeColor: "",
                    strokeOpacity: 0,
                    strokeWeight: 0,
                    fillColor: colors[obj.weather],
                    fillOpacity: fillOpacity[obj.weather]
                });
                circle.setMap(map);
                circles.push(circle);
            }
            var left= window.innerWidth-80-13;
//            $('#dlg').window('open').window('resize',{width:'80px',height:'200px',top: '150px',left:left+'px'});
        }

        function show_circles(){
            $('#show_rain').hide();
            $('#hide_rain').show();
            for(var i=0;i<circles.length;i++){
                circles[i].show();
            }
        }

        function hide_circles(){
            $('#hide_rain').hide();
            $('#show_rain').show();
            for(var i=0;i<circles.length;i++){
                circles[i].hide();
            }
        }

        function markerClick(e) {
            // 设置缩放级别和中心点
            open_map_dialog(e.target.panelid, e.target.gps, e.target.openurl)
        }

        function open_map_dialog(id, gps, url){
            map.setZoomAndCenter(18, gps);
            if(id != -999){
                $('#gtx').window('open').panel('refresh', url+id);
            }

        }

        function show_pump(){
            $('#show_pump').hide();
            $('#hide_pump').show();
            for(var i=0;i<pump_markers.length;i++){
                pump_markers[i].show();
            }
            pump_cluster.setMap(map);
        }

        function hide_pump(){
            $('#hide_pump').hide();
            $('#show_pump').show();
            for(var i=0;i<pump_markers.length;i++){
                pump_markers[i].hide();
            }
            pump_cluster.setMap(null);
        }

        function show_csdt(){
            $('#show_csdt').hide();
            $('#hide_csdt').show();
            for(var i=0;i<csdt_markers.length;i++){
                csdt_markers[i].show();
            }
            csdt_cluster.setMap(map);
        }

        function hide_csdt(){
            $('#hide_csdt').hide();
            $('#show_csdt').show();
            for(var i=0;i<csdt_markers.length;i++){
                csdt_markers[i].hide();
            }
            csdt_cluster.setMap(null);
        }

        function show_gate(){
            $('#show_gate').hide();
            $('#hide_gate').show();
            for(var i=0;i<gate_markers.length;i++){
                gate_markers[i].show();
            }
            gate_cluster.setMap(map);
        }

        function hide_gate(){
            $('#hide_gate').hide();
            $('#show_gate').show();
            for(var i=0;i<gate_markers.length;i++){
                gate_markers[i].hide();
            }
            gate_cluster.setMap(null);
        }

        function set_error_fixs(){
            var text = '';
            if(error_fixs > 0){
                text = '<option value="">'+error_fixs+'</option>';
            }else{
                text = '<option value="">'+error_fixs+'</option>';
            }
            error_fixs_text = text+error_fixs_text;
            $('#error').append(error_fixs_text);
        }
    </script>


</block>
